<template>
  <div>
    <div class="hea-nav" :class="{ active: headerActive }">
      <CateHea>
        <template #left>
          <i class="iconfont icon-hanbaocaidan"></i>
        </template>
        <template #center>
          <div class="search">
            <div class="search-left">
              <span class="app-name">G</span>
              <span class="line">|</span>
              <span class="iconfont icon-sousuo"></span>
            </div>
            <input type="text" class="hea-search" placeholder="家电返厂同价11.11" />
          </div>
        </template>
        <template #right>
          <!-- <i class="iconfont icon-wode1" v-if="$store.getters.getIsLogin" @click="$router.push('/user')"></i>-->
          <router-link tag="i" class="iconfont icon-wode1" v-if="$store.getters.getIsLogin" to="/user"></router-link>
          <router-link v-else class="login-txt" to="/login">登录</router-link>
        </template>
      </CateHea>
    </div>
    <Slide :hea-slide="heaSlide"></Slide>
  </div>
</template>

<script>
import Slide from '@/components/common/Slide'
import CateHea from '@/components/common/CateHea'
import { getSlideHome } from '@/http/index.js'
export default {
  data() {
    return {
      heaSlide: [],
      headerActive: false,
      isLogin: false,
    }
  },
  mounted() {
    // 添加滚动事件
    window.addEventListener('scroll', this.pageScroll)
  },
  created() {
    this.fetchSliders()
  },
  methods: {
    fetchSliders() {
      getSlideHome().then((res) => {
        this.heaSlide = res.data
      })
    },
    pageScroll() {
      // 获取滚动距离
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      scrollTop > 100 ? (this.headerActive = true) : (this.headerActive = false)
    },
  },
  components: {
    Slide,
    CateHea,
  },
}
</script>

<style lang="scss" scoped>
.hea-nav {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
  width: 100%;
  height: 100px;
  line-height: 1;
  color: white;
  box-sizing: border-box;
  .login-txt {
    font-size: 30px;
    font-weight: 700;
    color: white;
  }
  .search {
    position: relative;
    .search-left {
      position: absolute;
      top: 25%;
      left: 20px;
      font-size: 30px;
      color: #666;
      .app-name {
        font-weight: 700;
        color: red;
      }
      span {
        margin: 0 10px;
      }
      .icon-sousuo {
        font-size: 30px;
        color: #666;
      }
    }
    .hea-search {
      padding-left: 150px;
      width: 500px;
      height: 60px;
      color: #666;
      border-radius: 60px;
      box-sizing: border-box;
    }
  }
  .iconfont {
    font-size: 70px;
  }
}
.swiper-container {
  width: 100%;
}
.slide {
  .swiper_img {
    border-bottom: 5px solid skyblue !important;
  }
}
.active {
  background-color: red;
}
</style>
